How to use @angular/cdk/portal in Plunker

159 Views Asked by At

I'm brand new to Plunker and trying to use it to demonstrate a problem I'm having for another question that I posted. However, I do not know how to properly include another npm package, in this case @angular/cdk/portal.

Currently, when I try this:

import { PortalModule } from '@angular/cdk/portal';

I get this error:

Cannot find module '@angular/cdk/portal'.

I've tried just simply adding it to the package.json file;

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/cdk": "^6.4.7",  <-----------
        "@angular/common": "^6.0.9",
        "@angular/compiler": "^6.0.9",
        "@angular/core": "^6.0.9",
        "@angular/platform-browser": "^6.0.9",
        "@angular/platform-browser-dynamic": "^6.0.9",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

This did not work!

I've also tried blindly creating a config.js and adding it to the map section (but I don't know anything about this):

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular/cdk': 'https://www.npmjs.com/package/@angular/cdk'
  }
});

This did not work either, it seems like this file isn't being read at all. So not sure if I was copying some outdated info or if I'm just doing something wrong because I have no clue what I'm doing :-o

Any advice would be greatly appreciated!

0

There are 0 best solutions below