Question

我正在寻找定义自定义断点的方法，我使用Angular 2 Material，Angular 4和Angular CLI。需要说的是，我对这一切都是全新的。我已经看到了这个plunker，并尝试将其集成到我的应用中，但似乎无法正常工作（我坚持将config.js导入我的index.html）：

<head>
  ...
  <script src="../../config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

在Webstorm中，它看起来像这样：

但config.js导入没有问题，我的IDE没有显示任何错误。这是config.js：

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    // Copy of compiler options in standard tsconfig.json
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  meta: {
    'typescript': {
      "exports": "ts"
    }
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': './src',

    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/flex-layout' : 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
    'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
  },
  //packages defines our app package
  packages: {
    app: {
      main: './boot.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

有谁知道，为什么我不能在System.import('app').catch(console.error.bind(console));中致电index.html？

或者，如果您有将自定义断点集成到Angular 4应用程序的完整解决方案，请分享。

Angular 2材质：定义自定义断点

0 个答案: