ng-packagr cssUrl не в стилях подкладки или шаблонах - PullRequest
Новая
       33

ng-packagr cssUrl не в стилях подкладки или шаблонах

0 голосов
/ 29 августа 2018

Я использую ng-packagr для создания библиотеки компонентов. Я следовал за примерами в документации GitHub. Я могу создать библиотеку, упаковать и установить ее, но не могу встроить стили и шаблон. Вот пример. api, ng конфигурационный файл.

ng-tsconfig.ngc.json

{
    "angularCompilerOptions": {
      "annotateForClosureCompiler": true,
      "skipTemplateCodegen": true,
      "strictMetadataEmit": true,
      "fullTemplateTypeCheck": true,
      "enableResourceInlining": true
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "..",
      "target": "es2015",
      "module": "es2015",
      "moduleResolution": "node",
      "outDir": "",
      "declaration": true,
      "inlineSourceMap": true,
      "inlineSources": true,
      "skipLibCheck": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "importHelpers": true,
      "lib": ["dom", "es2015"]
    },
    "exclude": ["node_modules", "dist", "**/*.ngfactory.ts", "**/*.shim.ts", "**/*.spec.ts"],
    "files": ["AUTOGENERATED"]
  }

ng-package.json

{
  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts",
    "cssUrl": "inline"
  }
}

ng-packager-api.js

const ngPackage = require('ng-packagr');
const path = require('path');

ngPackage
  .ngPackagr()
  .forProject(path.join(__dirname, 'ng-package.json'))
  .withTsConfig(path.join(__dirname, 'ng-tsconfig.ngc.json'))
  .build()
  .catch(error => {
    console.error(error);
    process.exit(1);
  });

public_api.ts

export * from './src/lib/table/table.module';
export * from './src/lib/table/table';

Компонент под ./src/lib/table/table

table.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
    McTable,
    McTableComponent
} from './table';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        McTable,
        McTableComponent
    ],
    exports: [
        McTable,
        McTableComponent
    ]
})

export class McTableModule {}

table.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'table',
    template: '<ng-content></ng-content>',
    styleUrls: ['./table.scss']
})

export class Table{}

Мой вывод: 

import { Component } from '@angular/core';
var Table = /** @class */ (function () {
    function Table() {}
    Table.decorators = [
        { type: Component, args: [{
                    selector: 'table',
                    template: '<ng-content></ng-content>',
                    styleUrls: ['./table.scss']
                },] },
    ];
    /** @nocollapse */
    Table.ctorParameters = function () { return []; };
    Table.propDecorators = {};
    return Table;
}());

Версия 

"ng-packagr": "4.1.0",
"@angular/cli": "~1.7.3",
"@angular/animations": "5.2.0",
"@angular/cdk": "5.2.5",
"@angular/common": "5.2.0",
"@angular/compiler": "5.2.0",
"@angular/core": "5.2.0",
"@angular/flex-layout": "2.0.0-beta.12",
"@angular/forms": "5.2.0",
"@angular/http": "5.2.0",
"@angular/material": "5.2.5",
"@angular/platform-browser": "5.2.0",
"@angular/platform-browser-dynamic": "5.2.0",
"@angular/router": "5.2.0",

Я следовал учебному пособию Николаса Леблана, чтобы настроить проект с угловой скоростью. https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

...