Last two weeks I was preparing maven configuration and I was resolving my business problem by Android 2. I noticed a few important tips during that process. I'd like to gather them below:
1. In my project I use maven plugin to download NodeJS and npm modules. Then I build all application by execution of Npm tasks. I create a jar with built Angular's 2 files. Then in target project I extract these files into target directory.
- angular 2 maven project pom fragments
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<executions>
<!-- 1. Install node and npm locally -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v7.3.0</nodeVersion>
<npmVersion>3.10.10</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run prod</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run prod</arguments>
</configuration>
</execution>
<execution>
<id>npm run test-one</id>
<goals>
<goal>npm</goal>
</goals>
<phase>test</phase>
<configuration>
<forkMode>always</forkMode>
<environmentVariables>
<CHROME_BIN>${chrome.path}</CHROME_BIN>
</environmentVariables>
<arguments>run test-one</arguments>
</configuration>
</execution>
</executions>
</plugin>
|
- target project dependency and extracting plugin configuration
1
2
3
4
5
6
7
| <dependency>
<groupId>example</groupId>
<artifactId>example_angular2</artifactId>
<version>1.2.3.0-SNAPSHOT</version>
<type>jar</type>
<scope>provided</scope>
</dependency>
|
....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>3.0.0</version>
<executions>
<execution>
<id>unpack_angular2</id>
<phase>generate-resources</phase>
<goals>
<goal>unpack-dependencies</goal>
</goals>
<configuration>
<includeGroupIds>example</includeGroupIds>
<includeArtifactIds>example_angular2</includeArtifactIds>
<includes>**/*.*</includes>
<outputDirectory>${static.content.path}</outputDirectory>
</configuration>
</execution>
</executions>
</plugin>
|
2. I use angular-cli to manage whole Angular2 project. In angular-cli.json the apps attribute require a array parameter but it never use other elements of this table than first one. Nobody knows what for is there an array attribute.
3. On single webpage can be only one root module. It is chosen by executing bootstrapModule.
platformBrowserDynamic().bootstrapModule(MainModule);
With this module should be connected one main component which will contain template gathering all other components selectors.
You can use only one main selectors handled by this main component. In my case it looks like:
1
2
3
4
5
6
| @NgModule({
imports: [ AnalysisModule, DataHistoryModule],
declarations: [ MainComponent],
bootstrap: [ MainComponent],
})
export class MainModule { }
|
1
2
3
4
5
6
7
| @Component({
selector: 'app',
moduleId: module.id,
template : '<profile-analysis></profile-analysis><data-history></data-history>',
})
export class MainComponent{};
|
1
2
3
| <body>
<app>Loading...</app>
</body>
|
4. Every event is directly handled by containing component. To notice parent component you should add to selector's tag an attribute with handling method.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @Component({
selector: '[htitle]',
template: '<div (click)="orderColumn(\'data\', idx,\'change\')">Change</div>'
})
export class DataColumnTitleComponent {
@Input("htitle")
private value;
@Output()
changeOrder = new EventEmitter();
orderColumn(colType: string, id: number, subType: string): void {
this.changeOrder.emit({
value: { colType: colType, id: id, subType: subType }
});
}
};
|
- parent component which handles event
1
2
3
4
5
6
7
8
9
10
| @Component({
selector: 'profile-analysis',
moduleId: module.id,
template: ' <tr [htitle] (changeOrder)="onOrderColumn($event)"></tr>',
})
export class AnalysisComponent {
onOrderColumn(event): void {
console.log("parent " + event);
}
}
|
5. It is possible to show selectors tag content in a child element by using ng-content tag. It could be problem to access to this content in a selector's component. I found only one way to do this by execution a native method. However I don't know if it is good practice and it doesn't limits of advantages of virtual DOM.
1
2
3
4
5
6
7
8
9
10
11
| @Component({
selector: 'th-title',
template: '<th #contentWrapper><ng-content></ng-content></th>',
})
export class WrapperTitleComponent {
@ViewChild('contentWrapper') content: ElementRef;
ngAfterViewInit() {
console.debug(this.content.nativeElement.innerHTML);
}
};
|
