Adding @angular/Materials into a seed project
redevill opened this issue · comments
Hello,
[x] bug report - only in the sense that using my knowledge of V6, does not seem to work with V7.x
- and the support channel points to the seed-project, which has been deprecated.
Current behavior
When adding the module as follows in the project config.
const additionalPackages: ExtendPackages[] = [{
name: '@angular/material',
// Path to the package's bundle
path: 'node_modules/@angular/material/bundles/material.umd.js'
}];
this.addPackagesBundles(additionalPackages);
The npm run build.dev and build.prod complete without error.
The npm start however can't find the module.
Expected behavior
The the module is found and loaded.
Minimal reproduction of the problem with instructions
npm install of angular material,
followed by above project reference, npm start the project.
Thanks
Eti
Hi @redevill , I will verify this issue at the weekend,
Thanks!
Hello V,
Been doing a bit of work on this.
If the import statement specifies a specific submodule
e.g. import { MatMenu } from '@angular/material/menu';
and the additional package is specified as above (name: @angular/material), then SystemJS looks for
'node_modules/@angular/material/bundles/material.umd.js/menu'
This is the failure that I was seeing above.
I managed a successful specification, But had to import almost every submodule.
Perhaps this is intended? Was not sure (does not seem to follow the angular material docs). But this config allowed the Menu item to compile and run.
Thought this info might help.
Project.config.ts -
//Add packages (e.g. ng2-translate)
const additionalPackages: ExtendPackages[] = [{
name: '@angular/material/menu',
// Path to the package's bundle
path: 'node_modules/@angular/material/bundles/material-menu.umd.js'
},
{
name: '@angular/cdk/bidi',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-bidi.umd.js'
},
{
name: '@angular/cdk/coercion',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-coercion.umd.js'
},
{
name: '@angular/cdk/platform',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-platform.umd.js'
},
{
name: '@angular/cdk/coercion',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-coercion.umd.js'
},
{
name: '@angular/cdk/a11y',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-a11y.umd.js'
},
{
name: '@angular/cdk/keycodes',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-keycodes.umd.js'
},
{
name: '@angular/cdk/observers',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-observers.umd.js'
},
{
name: '@angular/cdk/overlay',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-overlay.umd.js'
},
{
name: '@angular/cdk/portal',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-portal.umd.js'
},
{
name: '@angular/cdk/scrolling',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js'
},
{
name: '@angular/cdk/layout',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-layout.umd.js'
},
{
name: '@angular/cdk/collections',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-collections.umd.js'
},
{
name: '@angular/cdk/text-field',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-text-field.umd.js'
},
{
name: '@angular/cdk/accordion',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-accordion.umd.js'
},
{
name: '@angular/cdk/stepper',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-stepper.umd.js'
},
{
name: '@angular/cdk/table',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-table.umd.js'
},
{
name: '@angular/cdk/tree',
// Path to the package's bundle
path: 'node_modules/@angular/cdk/bundles/cdk-tree.umd.js'
}];
Unfortunately, it's the only way to add Material in seed for now.