diff --git a/README.md b/README.md
index 13ed2d4..e5ac095 100644
--- a/README.md
+++ b/README.md
@@ -55,17 +55,6 @@ npm i -g bower
bower init
```
-Create a `.bowerrc` file in your project root folder to move the default `bower_components/` directory to your app's root.
-
-`.bowerrc`
-```json
-{
- "directory": "src/bower_components"
-}
-```
-
-You should not check in `src/bower_components/` to your project's repository. Add it to `.gitignore`. When cloning a fresh install, run `npm install && bower install`.
-
### 3. Load polyfills
```sh
@@ -81,15 +70,16 @@ Modify `.angular-cli.json` and add the following to your app's assets.
{
"apps": [
{
- ...
+ "root": "src",
"assets": [
- ...
- "bower_components/webcomponentsjs/custom*.js",
- "bower_components/webcomponentsjs/web*.js"
+ /* include other assets such as manifest.json */
+ "../bower_components/webcomponentsjs/custom*.js",
+ "../bower_components/webcomponentsjs/web*.js"
],
- ...
+ /* remaining app config */
}
- ]
+ ],
+ /* remaining CLI config */
}
```
@@ -106,7 +96,18 @@ Next, modify the `index.html` shell to include the polyfills.
-
+
+
+
+
+
@@ -126,6 +127,17 @@ import { webcomponentsReady } from '@codebakery/origami';
import { AppModule } from './app/app.module';
+webcomponentsReady().then(() => {
+ platformBrowserDynamic().bootstrapModule(AppModule);
+});
+```
+
+#### Angular 4 templates
+
+Angular 4 consumes native `` tags, which are commonly used in web components. Add the following configuration to the app's bootstrap to prevent this.
+
+`main.ts`
+```ts
webcomponentsReady().then(() => {
platformBrowserDynamic().bootstrapModule(AppModule, {
enableLegacyTemplate: false // Required for Angular 4 to use native s
@@ -133,8 +145,6 @@ webcomponentsReady().then(() => {
});
```
-#### Angular 4 only
-
`enableLegacyTemplate: false` will prevent Angular 4 from turning native `` elements into ``s. Bootstrap options must also be specified in your `tsconfig.json` for Ahead-of-Time compilation.
`tsconfig.app.json`
@@ -149,7 +159,7 @@ webcomponentsReady().then(() => {
}
```
-Angular 5 defaults this value to `false`. You do not need to include it in your bootstrap function or `tsconfig.json`.
+Angular 5+ defaults this value to `false`. You do not need to include it in your bootstrap function or `tsconfig.json`.
### 4. Import Origami
diff --git a/patch-cli.js b/patch-cli.js
index c36f7d2..7942748 100644
--- a/patch-cli.js
+++ b/patch-cli.js
@@ -7,15 +7,36 @@ const stylesPath = path.resolve(__dirname, '../../@angular/cli/models/webpack-co
let data = fs.readFileSync(commonPath, 'utf8');
if (!data.includes('/* Origami Patched */')) {
data = '/* Origami Patched */\n' + data;
- data = data.replace(/(modules:\s*\[)/g, '$1path.resolve(appRoot, \'bower_components\'), ');
- data = data.replace(/{.*html\$.*},/, `
+ data = data.replace(/(appRoot =.*;)/, `$1
+ /* origami patch start */
+ const bowerDirs = [
+ path.resolve(appRoot, 'bower_components'),
+ path.resolve(projectRoot, 'bower_components')
+ ];
+
+ try {
+ const bowerrc = JSON.parse(require('fs').readFileSync(path.resolve(projectRoot, './.bowerrc')));
+ if (bowerrc && bowerrc.directory) {
+ bowerDirs.push(path.resolve(projectRoot, bowerrc.directory));
+ }
+ } catch (e) {
+ // .bowerrc not present
+ }
+ /* origami patch end */
+ `);
+ data = data.replace(/(modules:\s*\[)/g, '$1/* origami patch start */...bowerDirs, /* origami patch end */');
+ data = data.replace(/({.*html\$.*}),/, `
+ /* origami patch start */
+ /*
+ $1
+ */
// Use polymer-webpack-loader for element html files and raw-loader for all
// other Angular html files
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [
- path.resolve(appRoot, 'bower_components'),
+ ...bowerDirs,
path.resolve(appRoot, 'elements')
]
},
@@ -31,7 +52,7 @@ if (!data.includes('/* Origami Patched */')) {
{ loader: 'polymer-webpack-loader' }
],
include: [
- path.resolve(appRoot, 'bower_components'),
+ ...bowerDirs,
path.resolve(appRoot, 'elements')
]
},
@@ -48,7 +69,7 @@ if (!data.includes('/* Origami Patched */')) {
{ loader: 'script-loader' }
],
include: [
- path.resolve(appRoot, 'bower_components'),
+ ...bowerDirs,
path.resolve(appRoot, 'elements')
]
},
@@ -64,6 +85,7 @@ if (!data.includes('/* Origami Patched */')) {
}
]
}],
+ /* origami patch end */
`);
fs.writeFileSync(commonPath, data);