在Angular4上构建AOT和Rollup后,CSS无法正常工作

时间:2018-04-30 16:34:48

标签: angular rollup

出于某种原因,我在角度4上构建我的应用程序后,css中断为AOT rollup.js

我使用相同的AOT配置: https://v4.angular.io/guide/aot-compiler

没有编译错误,没有控制台错误,但组件或styleUrls上的css已损坏。

有什么想法吗?我错过了什么吗?

    @Component({
      selector: 'app-article',
      templateUrl: './article.component.html',
      styleUrls:['./article.component.css']
    })

汇总-config.js

        import nodeResolve from 'rollup-plugin-node-resolve';
        import commonjs    from 'rollup-plugin-commonjs';
        import uglify      from 'rollup-plugin-uglify';

        export default {
          entry: 'src/main.js',
          dest: 'src/build.js', // output a single application bundle
          sourceMap: false,
          format: 'iife',
          onwarn: function(warning) {
            // Skip certain warnings

            // should intercept ... but doesn't in some rollup versions
            if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

            // console.warn everything else
            console.warn( warning.message );
          },
          plugins: [
              nodeResolve({jsnext: true, module: true}),
              commonjs({
                include: 'node_modules/rxjs/**',
              }),
              uglify()
          ]
        };

1 个答案:

答案 0 :(得分:0)

我发现了问题,问题是在运行ngc或build之后在src文件夹外生成了aot文件夹:aot。在thets.config.aot.json上配置错误

    -src-
        -aot-
        -app-
          components
          app.component.ts
          app.module.ts
        -assets-
        -wwwroot-
        main.ts
        main.aot.ts
        ts.config.json
        ts.config.aot.json
        index.html